<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="queryParams.username"
          placeholder="请输入"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流水类型" prop="transType">
        <el-select
          v-model="queryParams.transType"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in transTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <el-select
          v-model="queryParams.currency"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in currencyOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="交易时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>

    <el-row>
      <el-col>
        <el-table v-loading="loading" :data="roleList">
          <el-table-column
            label="用户名"
            prop="username"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="流水类型"
            prop="transType"
            :formatter="transTypeFormat"
            v-if="columns[1].visible"
          />
          <el-table-column
            label="交易数量"
            prop="amount"
            v-if="columns[2].visible"
          />
          <el-table-column
            label="交易币种"
            prop="currency"
            v-if="columns[3].visible"
          />
          <el-table-column
            label="交易时间"
            align="center"
            prop="createTime"
            v-if="columns[4].visible"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="showAmountClas">
          <div class="showAmountFirClas">
            交易数量汇总：{{ Number(amountSum) }}
          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { transRecordList } from "@/api/biz";

export default {
  name: "Stream",
  data () {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      amountSum: 0, //交易汇总
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 流水状态数据字典
      transTypeOptions: [
        {
          dictValue: '1',
          dictLabel: '充币(收款)'
        },
        {
          dictValue: '2',
          dictLabel: '提币(转账)'
        },
        {
          dictValue: '3',
          dictLabel: '兑换(转换)'
        },
        {
          dictValue: '4',
          dictLabel: '内部转账'
        },
        {
          dictValue: '5',
          dictLabel: '投资BTC'
        },
        {
          dictValue: '6',
          dictLabel: '静态奖励'
        },
        {
          dictValue: '7',
          dictLabel: '推荐奖'
        },
        {
          dictValue: '8',
          dictLabel: '团队奖'
        },
        {
          dictValue: '9',
          dictLabel: '平级奖'
        },
        {
          dictValue: '10',
          dictLabel: '后台充值'
        },
        {
          dictValue: '11',
          dictLabel: '投资CRU'
        },
        {
          dictValue: '12',
          dictLabel: '矿池分红'
        },
        {
          dictValue: '13',
          dictLabel: 'CRU质押'
        },
        {
          dictValue: '14',
          dictLabel: 'CRU解押'
        },
        {
          dictValue: '15',
          dictLabel: '取消BTC挖矿'
        },
        {
          dictValue: '16',
          dictLabel: '取回BTC矿机'
        },
        {
          dictValue: '17',
          dictLabel: '投资XCH'
        },
        {
          dictValue: '18',
          dictLabel: '投资BZZ'
        },
        {
          dictValue: '19',
          dictLabel: '投资PHA'
        }
      ],
      // 币种状态数据字典
      currencyOptions: [
        {
          dictValue: 'BTC',
          dictLabel: 'BTC'
        },
        {
          dictValue: 'USDT',
          dictLabel: 'USDT'
        },
        {
          dictValue: 'XCH',
          dictLabel: 'XCH'
        },
        {
          dictValue: 'CRU',
          dictLabel: 'CRU'
        },
        {
          dictValue: 'BZZ',
          dictLabel: 'BZZ'
        },
        {
          dictValue: 'PHA',
          dictLabel: 'PHA'
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        username: undefined,
        transType: undefined,
        currency: undefined
      },
      // 列信息
      columns: [
        { key: 0, label: `用户名`, visible: true },
        { key: 1, label: `流水类型`, visible: true },
        { key: 2, label: `交易金额`, visible: true },
        { key: 3, label: `交易币种`, visible: true },
        { key: 4, label: `交易时间`, visible: true }
      ]
    };
  },
  created () {
    this.getList();
  },
  methods: {
    // 状态字典翻译
    transTypeFormat (row, column) {
      return this.selectDictLabel(this.transTypeOptions, row.transType);
    },
    /** 查询角色列表 */
    getList () {
      this.loading = true;
      transRecordList(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.roleList = response.list.rows;
          this.total = response.list.total;
          this.amountSum = response.amountSum;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>
<style lang="scss" scoped>
.showAmountClas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .showAmountFirClas {
    color: #606266;
    font-size: 14px;
  }
}
</style>
